<template>
  <main class="container">
    <!-- 功能 -->
    <div class="extra">
      <div class="extra-left">
        <a-button type="primary" @click="addCase">新增案例</a-button>
        <a-button @click="uploadBatchClassification">批量导入</a-button>
      </div>
      <div class="extra-right">
        <a-input-search v-model:value="searchForm.keyword" placeholder="请输入关键词" style="width: 200px" @search="onSearch" />
      </div>
    </div>
    <!-- 表格 -->
    <a-table :columns="columns" :data-source="list" :pagination="false" :loading="loading">
      <template #bodyCell="{ column, record, index }">
        <!-- 序号 -->
        <template v-if="column.key == 'index'">{{ index + 1 }}</template>
        <!-- 所属分类 -->
        <template v-if="column.key == 'classification_id'">{{ classificationMap.get(record.classification_id) }}</template>
        <!-- 创建时间 -->
        <template v-if="column.key == 'created_at'">{{ formatUnixTimestamp(record.created_at) }}</template>
        <!-- 更新时间 -->
        <template v-if="column.key == 'updated_at'">{{ formatUnixTimestamp(record.updated_at) }}</template>
        <!-- 操作 -->
        <template v-if="column.key === 'operation'">
          <span class="actions">
            <!-- 编辑 -->
            <FormOutlined @click="updateCase(record._id)" />
            <!-- 删除 -->
            <a-popconfirm title="确定要删除当前类别吗?" ok-text="确定" cancel-text="取消" @confirm="deleteCase(record._id)">
              <DeleteOutlined style="margin-left: 16px; color: red" />
            </a-popconfirm>
          </span>
        </template>
      </template>
    </a-table>
    <!-- 分页器 -->
    <a-pagination
      v-model:current="curPage"
      v-model:pageSize="pageSize"
      show-size-changer
      :total="total"
      :show-total="(total: number) => `共 ${total} 条数据`"
    />
  </main>
</template>
<script setup lang="ts">
import { reactive, ref, onMounted } from "vue"
import { useRouter } from "vue-router"
import { FormOutlined, DeleteOutlined } from "@ant-design/icons-vue"
import { notification, type TableColumnsType } from "ant-design-vue"
import usePagination from "@/hooks/usePagination"
import { formatUnixTimestamp } from "@/utils"
import { deleteCaseRecord, getAllCaseCategory, getCaseList } from "@/api/case"

const router = useRouter()
const searchForm = reactive({
  keyword: ""
})
const classificationMap = ref<any>(new Map())
let { curPage, total, pageSize, list, updateData, searchQuery, loading } = usePagination(getCaseList)

const columns: TableColumnsType = [
  { title: "序号", key: "index", align: "center", width: 100 },
  {
    title: "所属分类",
    dataIndex: "classification_id",
    key: "classification_id",
    align: "center",
    sorter: { compare: (a: any, b: any) => a.name.localeCompare(b.name) }
  },
  {
    title: "案例名称",
    dataIndex: "name",
    key: "name",
    align: "center",
    sorter: { compare: (a: any, b: any) => a.name.localeCompare(b.name) }
  },
  {
    title: "创建时间",
    dataIndex: "created_at",
    key: "created_at",
    align: "center",
    sorter: { compare: (a: any, b: any) => a.name.localeCompare(b.name) }
  },
  {
    title: "更新时间",
    dataIndex: "updated_at",
    key: "updated_at",
    align: "center",
    sorter: { compare: (a: any, b: any) => a.name.localeCompare(b.name) }
  },
  {
    key: "operation",
    fixed: "right",
    width: 100
  }
]

onMounted(async () => {
  let { code, data } = await getAllCaseCategory()
  if (code == 0) {
    data!.forEach(item => {
      classificationMap.value.set(item._id, item.name)
    })
  }
})

const onSearch = () => {
  if (!searchForm.keyword) {
    delete searchQuery.name
    updateData()
    return
  }
  searchQuery.name = searchForm.keyword
}
const addCase = () => {
  router.push("/case/edit")
}
const updateCase = (id: string) => {
  router.push({ path: "/case/edit", query: { id } })
}
const uploadBatchClassification = () => {
  notification.warning({
    message: "功能暂未开放",
    description: "批量上传功能暂不可用，后续将陆续开放！"
  })
}
const deleteCase = async (caseId: string) => {
  let data = await deleteCaseRecord(caseId)
  if (data.code == 0) {
    notification.success({
      message: data.message
    })
    updateData()
  }
}
</script>

<style scoped lang="scss">
@import "./index.scss";
</style>
